<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 90%;
      display: flex;
      justify-content: space-evenly;
      margin: auto;
    }
  </style>
</head>

<body>
  <div id="box" class="box">

  </div>
</body>
<script>
  const imgs = ['https://img0.baidu.com/it/u=627294990,2663349226&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1065', 'https://img0.baidu.com/it/u=3616492394,280017474&fm=253&fmt=auto?w=681&h=1216', 'https://img2.baidu.com/it/u=2466584564,2983421273&fm=253&fmt=auto?w=800&h=800', 'https://img0.baidu.com/it/u=3688936626,1776866531&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', 'https://img0.baidu.com/it/u=1191090917,4126757286&fm=253&fmt=auto&app=138&f=JPEG?w=293&h=500', 'https://t7.baidu.com/it/u=4256280520,1252070511&fm=193&f=GIF', 'https://img0.baidu.com/it/u=3492870679,1774601260&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=800', 'https://img0.baidu.com/it/u=3396549360,2986015431&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667', 'https://img0.baidu.com/it/u=168360337,1181015822&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=748', 'https://img1.baidu.com/it/u=2152506004,1167247515&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=783', 'https://img0.baidu.com/it/u=1998770060,4204103191&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067', 'https://img0.baidu.com/it/u=414575744,828045286&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1571', 'https://img1.baidu.com/it/u=2534756884,1580036423&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=664', 'https://img1.baidu.com/it/u=1341792919,3708401615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889', 'https://img1.baidu.com/it/u=1427885882,1188994874&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750', "https://ts1.cn.mm.bing.net/th/id/R-C.a92517026098e91e7fd903999ab4badd?rik=fyfEGxArV8FCbA&riu=http%3a%2f%2fpuui.qpic.cn%2fvpic_cover%2ff3360eswdid%2ff3360eswdid_hz.jpg%2f1280&ehk=wKVmBeHczPdiUw0j3EehbdGkN0g%2fi3oS2nct9UXTZIQ%3d&risl=&pid=ImgRaw&r=0", "https://tse2-mm.cn.bing.net/th/id/OIP-C.9GSUdvV-wgORSoo5rB3TAgHaNK?rs=1&pid=ImgDetMain", "https://tse3-mm.cn.bing.net/th/id/OIP-C.cIGsR32hEtqHtejFiRP2jAHaHa?rs=1&pid=ImgDetMain", "https://img.shetu66.com/2022/08/cutCoverImg/1663066146190645.jpg", "https://tse1-mm.cn.bing.net/th/id/OIP-C.T2WUfwE6xUaCPRcSdVPvFgHaE8?rs=1&pid=ImgDetMain", "https://img.keaitupian.cn/newupload/10/1667014559163285.jpg", "https://tse4-mm.cn.bing.net/th/id/OIP-C.9IHb462Jupra9CZAT3oQjAHaEK?rs=1&pid=ImgDetMain"]

  class Waterfall {
    constructor(option) {
      this.id = option.id
      this.colmunsWidth = option.columnsWidth
    }
    calc() {
      this.box = document.getElementById(this.id)
      this.box.innerHTML = ""
      this.boxWidth = this.box.offsetWidth
      // 计算能放置多少行
      this.colmuns = Math.floor(this.boxWidth / this.colmunsWidth)
      this.colmunsHeight = []
      for (let i = 0; i < this.colmuns; i++) {
        this.colmunsHeight.push(0)
        this.createColumn()
      }
    }
    createColumn() {
      const colmunDiv = document.createElement('div')
      colmunDiv.style.width = this.colmunsWidth + 'px'
      box.appendChild(colmunDiv)
    }
    init(images) {
      this.calc()
      this.images = images
      this.imgageEnds = new Array(this.images.length).fill(null)
      this.render()
    }
    render() {
      this.images.forEach((item, index) => {
        let img = document.createElement('img')
        img.src = item
        img.style.width = '100%'
        img.onload = () => {
          this.imgageEnds[index] = img
          for (let i = 0; i < this.imgageEnds.length; i++) {
            if (this.imgageEnds[i]) {
              this.addImg(this.imgageEnds[i])
            }
          }
        }
      })
    }
    addImg(img) {
      let minIndex = this.getMinIndex()
      this.box.children[minIndex].appendChild(img)
      this.colmunsHeight[minIndex] += img.height
    }
    getMinIndex() {
      let min = Math.min(...this.colmunsHeight)
      return this.colmunsHeight.indexOf(min)
    }
  }

  const waterfall = new Waterfall({
    id: 'box',
    columnsWidth: 300
  })
  window.onload = () => {
    waterfall.init(imgs)
  }
  window.addEventListener('resize', () => {
    waterfall.init(imgs)
  })
</script>

</html>